<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            * { box-sizing: border-box; }

            body {
              font-family: sans-serif;
            }

            /* ---- grid ---- */

            .grid {
              background: #DDD;
              max-width: 1200px;
            }

            /* clear fix */
            .grid:after {
              content: '';
              display: block;
              clear: both;
            }

            /* ---- .grid-item ---- */

            .grid-item {
              float: left;
              width: 100px;
              height: 100px;
              background: #0D8;
              border: 2px solid #333;
              border-color: hsla(0, 0%, 0%, 0.7);
            }

            .grid-item--width2 { width: 200px; }
            .grid-item--height2 { height: 200px; }

        </style>
    </head>
    <body>
        <h1>Isotope - masonry layout mode</h1>

        <div class="grid">
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item grid-item--height2"></div>
          <div class="grid-item"></div>
          <div class="grid-item"></div>
          <div class="grid-item grid-item--width2 grid-item--height2"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item grid-item--height2"></div>
          <div class="grid-item"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item grid-item--height2"></div>
          <div class="grid-item"></div>
          <div class="grid-item"></div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script>
        $('.grid').isotope({
          itemSelector: '.grid-item',
          masonry: {
            columnWidth: 100
          }
        });
        </script>
    </body>
</html>